<%--
  Created by IntelliJ IDEA.
  User: 17420
  Date: 2021/7/28
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="jquery.js"></script>
    <title>搜索结果</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        h2,
        b {
            font-weight: normal;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .grey {
            background: url(img/bg.png) repeat;
        }

        .content {
            width: 800px;
            margin: 0 auto;
            padding: 50px 200px;
        }

        .content .infos li {
            font-size: 15px;
            width: 600px;
            height: 180px;
            background-color: rgb(247, 247, 247);
            margin: 20px 0;
            border-radius: 5px;
            transition-duration: 0.1s;
        }

        .content .infos li:hover {
            -webkit-box-shadow: #ccc 0px 10px 10px;
            -moz-box-shadow: #ccc 0px 10px 10px;
            box-shadow: #ccc 0px 10px 10px;
        }

        .content .infos .image {
            width: 130px;
            height: 180px;
            margin-right: 20px;
            float: left;
        }

        .content .infos .image img {
            width: 100%;
            height: 100%;
        }

        .content .infos .name {
            width: 450px;
            height: 20px;
            margin-top: 10px;
            margin-bottom: 15px;
            color: #37a;
            float: left;
        }

        .content .infos p {
            margin-bottom: 14px;
        }

        .content .pages {
            height: 50px;
        }

        .content .pages b {
            height: 25px;
            width: 25px;
            display: block;
            float: left;
            border-radius: 15px;
            background-color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 25px;
            margin: 10px 5px;
            background-color: #ccc;
            cursor: pointer;
        }
        /*页眉：*/

        .top {
            height: 40px;
            background-color: #313438;
        }

        .log_regis {
            color: #BEBEBE;
        ;
            position: absolute;
            line-height: 40px;
            left: 1150px;
        }

        .log_regis img:hover{
            border-top:5px solid #313438;
        }

        .welcome{
            color:white;
            line-height: 40px;
            position: absolute;
            left: 1200px;
        }

        .exit{
            color:#BEBEBE;
            position:absolute;
            line-height: 40px;
            right:40px;
        }

        .exit img:hover{
            border-top:5px solid #313438;
        }

        .header {
            height: 120px;
            padding-left: 150px;
            background-color: white;
        }

        .header input {
            height: 35px;
            width: 300px;
            position: absolute;
            top: 120px;
            left: 700px;
            border: 2px solid #000000;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            outline: none;
            padding-left: 20px;
        }

        .header button {
            height: 39px;
            width: 100px;
            position: absolute;
            top: 120px;
            left: 1001px;
            border: 5px solid #000000;
            background-color: #000000;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            padding-top: 3px;
        }

        .header button:hover {
            cursor: pointer;
            background-color: #5f5f5f;
            border: #5f5f5f;
        }

        .line1 {
            height: 130px;
            position: absolute;
            top: 110px
        }
        /*页脚：*/

        .foot {
            height: 320px;
            background-color: #313438;
            padding: 80px;
            color: #fff;
            font-size: 15px;
            box-sizing: border-box;
            text-align: center;
        }

        .foot ul li {
            width: auto;
            padding-right: 15px;
            padding-left: 15px;
            height: 15px;
            line-height: 15px;
            float: left;
            border-right: 1px solid #fff;
            text-align: center;
        }

        .foot ul li a:hover {
            text-decoration: underline;
        }

        .foot_content1 {
            margin: 0 auto;
            width: 410px;
        }

        .foot_content2 {
            margin: 0 auto;
            width: 200px;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .home{
            color:white;
            line-height: 40px;
            position:absolute;
            left:40px;
            padding:5px;
        }


    </style>
</head>

<body>

<!--顶部横条-->
<div class="top">

    <div class="home">
        <a href="index.jsp"><img title="首页" src="img/小房子.png" height="30px;"></a>
    </div>

    <div class="log_regis">
        <a href="Info?method=userInfo&userId=${user.getId()}"><img title="个人中心" src="img/头像.jpeg" height="40px;"></a>
    </div>

    <div class="welcome">
        <p>${user.getUsername()}，欢迎你！</p>
    </div>

    <div class="exit">
        <a href="Logout"><img  title="退出登录" src="img/出口.jpg" height="40px;"></a>
    </div>

</div>

<!--页眉-->
<div class="header">
    <img src="img/logo4.png" height="120px" width="200px" />
    <img src="img/场记板2.png" height="60px" width="100px" />
    <form action="Movie" method="post">
        <input type="text" name="name">
        <%--    <input type="button" src="img/放大镜.png" height="25px" value="搜索">--%>
        <button><img src="img/放大镜.png" height="25px"/></button>
    </form>
</div>

<!--主板-->
<br>
<img src="img/摄影机.png" class="line1" />
<hr style="background-color:#000; height:5px;margin-left: 100px;"><br>

<div class="grey">
    <div class="content">
        <h2 class="tit"> 搜索结果：</h2>
        <ul class="infos">
            <c:forEach items="${List}" var="movie">
                <li>
                    <div class="image">
                        <img src="img/${movie.name}.webp" />
                    </div>

                    <a class="name" href="Movie?method=findById&id=${movie.id}">${movie.name}<b class="year">${movie.year}</b></a>
                    <p class="grade">评分：<fmt:formatNumber type="number" value="${(movie.grade / movie.number) * 2}" maxFractionDigits="1"/></p>
                    <p class="type"> ${movie.type}</p>
                    <p class="area">${movie.area}</p>
                    <p class="lenght">${movie.length}分钟</p>
                </li>
            </c:forEach>
        </ul>
        <div class="pages"></div>
    </div>
</div>
<script>
    $(function() {
        var cur = 1; //当前页
        var pagesize = 10; //设置每页尺寸

        var renpage = function() {
            //定义函数，处理分页
            var x = (cur - 1) * pagesize;
            var y = cur * pagesize;
            $('.infos').find('li').hide().slice(x, y).show()
        }

        //以下代码添加分页
        var n = $('.infos').find('li').length; //总记录条数
        var pages = Math.ceil(n / pagesize); //计算总页数

        for (let p = 0; p < pages; p++) {
            $("<b>" + (p + 1) + "</b>").appendTo($('.pages')).click(function() {
                cur = p + 1;
                console.log(cur);
                renpage();
            });
        }

        renpage(); //当页面加载时也要初始化分页

    })
    window.onload = function() {
        //翻页高亮：
        var ele = document.querySelectorAll('.pages b');
        ele[0].style.backgroundColor = "#999"
        for (var i = 0; i < ele.length; i++) {
            ele[i].onclick = function() {
                for (var i = 0; i < ele.length; i++) {
                    ele[i].style.backgroundColor = "";
                }
                this.style.backgroundColor = '#999';
            }
        }
    }
</script>

<!--页脚-->
<div class="foot">
    <p>友情链接</p><br>
    <div class="foot_content1">
        <ul>
            <li style="padding-left:0px;"><a target="_blank" href="https://movie.douban.com/">豆瓣电影</a></li>
            <li><a target="_blank" href="http://kan.sogou.com/">搜狗影视</a></li>
            <li><a target="_blank" href="https://www.51miz.com/">觅知网</a></li>
            <li><a target="_blank" href="https://www.iqiyi.com/">爱奇艺</a></li>
            <li><a target="_blank" href="https://v.qq.com/">腾讯视频</a></li>
        </ul>
    </div>
    <br><br><br>
    <p>制作团队</p><br>
    <div class="foot_content2">
        <ul>
            <li style="padding-left:0px;">刘俊仪</li>
            <li>练汪鑫</li>
            <li>刘源</li>
        </ul>
    </div>
</div>
</body>

</html>